<!DOCTYPE html>
<html>
<head>
	<title>美女轮播图</title>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;}
		#wrap{
			width: 600px;
			height: 400px;
			margin: 100px auto;
			cursor: pointer;
			position: relative;
		}
		#pic li{
			position: absolute;
			left: 0;
			top: 0;
			display: none;
			z-index: 1;
		}
		#num{
			z-index: 2;
			position: absolute;
			bottom: 10px;
			left: 40%;
		}
		#num li{
			float: left;
			width: 20px;
			height: 20px;
			background: #666;
			border-radius: 50%;
			color: #fff;
			text-align: center;
			line-height: 20px;
			margin: 3px;
		}
		#num li.active{background:#f00;}
		.arrow{
			z-index: 3;
			height: 40px;
			width: 30px;
			display: none;
			position: absolute;
			top: 45%;
			color: #fff;
			text-decoration: none;
			line-height: 40px;
			text-align: center;
			background: rgba(0, 0, 0, 0.5);
		}
		#wrap:hover .arrow{
			display:block;
		}
		#left{
			left:2%;
		}
		#right{
			right:2%;
		}
	</style>
</head>
<body>
	<div id="wrap">

		<ul id="pic">
			<li style="display: block;"><img src="1.jpg"></li>
			<li><img src="2.jpg"></li>
			<li><img src="3.jpg"></li>
			<li><img src="4.jpg"></li>
			<li><img src="5.jpg"></li>
		</ul>
		<ul id="num">
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<a href="javascript:void(0);" class="arrow" id="left">&lt;</a>
		<a href="javascript:void(0);" class="arrow" id="right">&gt;</a>
	</div>
	<script type="text/javascript">
		window.onload = (function (w,wrap,pic,num,left,right) {
			function id(a) {
				return document.getElementById(a);
			}
			var g = {index:0};
			var pics = id(pic).getElementsByTagName("li");
			pics = Array.prototype.slice.apply(pics);
			var nums = id(num).getElementsByTagName('li');
			var wrap = id(wrap);
			var left = id(left);
			var right = id(right);
			
			left.onclick = function () {
				g.index = g.index + 3;
				change.call(g);
			}
			right.onclick = change.bind(g);
			function change() {
				this.index = (this.index+1)%5;
				pics.forEach((function (item,i) {
					if(this.index == i ){
						item.style.display = "block";
						nums[i].className = "active";
					} else{
						item.style.display = "none";
						nums[i].className = "";
					}
				}).bind(this));
			}
			function run() {
				g.timer = setInterval(change.bind(g),2000);
			}
			run();

			wrap.onmouseover = function (e) {
				clearInterval(g.timer);
			}
			wrap.onmouseout = function (e) {
				run();
			}
		})(window,"wrap","pic","num","left","right");
	</script>
</body>
</html>